@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>活动列表</h5>
        </div>
        <div class="ibox-content">

            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="-1">全部</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="0">草稿</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="1">进行中</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="2">已结束</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tblDataList" class="tab-pane active">
                        <div class="panel-body">
                            <form role="form" class="form-inline">
                                <div class="form-group">
                                    <select class="form-control " name="class">
                                        <option value="">---请选择分类----</option>
                                        @foreach($class as $row)
                                            <option value="{{$row->id}}">{{$row->name}}</option>
                                        @endforeach
                                    </select>

                                </div>
                                <div class="form-group">
                                    <input type="text" name="title" placeholder="标题" class="form-control">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="input-sm form-control" name="datetime" id="datetime"  placeholder="活动时间">
                                        <!-- <span class="input-group-addon">to</span>
                                        <input type="text" class="input-sm form-control" name="endtime" id="datetimeEnd" placeholder="发货结束时间"> -->
                                </div>
                                <button class="btn btn-primary btn-sm" type="button" id="buttonData">搜索</button>
                                <a class="btn btn-info btn-sm pull-right" href="/admin/activity/create">添加活动</a>
                            </form>
                            <div class="hr-line-dashed"></div>
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>活动id</th>
                                        <th>标题</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>分类</th>
                                        <th>报名人数</th>
                                        <th>发布</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="text-center " id='pagination'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tplDataListTr">
    @{{each rows.data as v i}}
        <tr data-id="@{{v.id}}" data-status="@{{v.status}}">
            <td>@{{v.id}}</td>
            <td>@{{v.title}}</td>
            <td>@{{v.start_time}}</td>
            <td>@{{v.end_time}}</td>
            <td>@{{v.class.name}}</td>
            <td>@{{v.count}}</td>
            <td>@{{v.statusName}}</td>
            <td>
                <div class="btn-group" role="group">
                    <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        操作
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                        @{{if v.status==0}}
                            <li><a href="javascript:;" class="btn-status" rel="1">
                                发布活动</a></li>
                        @{{else if v.status==1}}
                            <li><a href="javascript:;" class="btn-status" rel="2">
                                结束报名</a></li>
                        @{{/if}}

                        @{{if v.is_pro==0}}
                            <li><a href="javascript:;" class="btn-pro" rel="@{{v.is_pro}}">
                                设为推荐</a></li>
                        @{{else}}
                            <li><a href="javascript:;" class="btn-pro" rel="@{{v.is_pro}}">
                                取消推荐</a></li>
                        @{{/if}}

                        @{{if v.status==2}}
                             <li><a href="/admin/activity/edit?id=@{{v.id}}" class="m-r-xs  btn-xs btn-box-history">添加活动回顾</a></li>
                        @{{else}}
                             <li><a href="/admin/activity/edit?id=@{{v.id}}" class="m-r-xs  btn-xs btn-box-history">编辑</a></li>
                        @{{/if}}

                        <li><a href="javascript:;" class=" btn-del">删除</a>

                        <li><a href="/admin/activity/@{{v.id}}/export" class="m-r-xs  btn-xs btn-export">导出表格</a></li>
                        <li><a href="javascript:;" class="m-r-xs  btn-xs btn-join">查看报名</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    @{{/each}}
</script>


<script type="text/html" id="tplDataJoinListTr">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">报名列表</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>会员编码</th>
                                <th>报名时间</th>
                                <th>用户名</th>
                                <th>手机号</th>
                            </tr>
                        </thead>
                        <tbody>
                            @{{each data as row}}
                                <tr>
                                    <td>@{{row.user.number}}</td>
                                    <td>@{{row.created_at}}</td>
                                    <td>@{{row.user.nickname}}</td>
                                    <td>@{{row.user.mobile}}</td>
                                </tr>
                            @{{/each}}
                        </tbody>
                    </table>
                    <div class="row  pull-center  ">
                        <div class="col-md-12 text-right    pagination2">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
</script>

@endsection

@section('pageheader')
@endsection
@section('pagescript')
<script src="/assets/layDate/laydate.js"></script>
<script>
    $("#side-menu li[rel='activity']").addClass("active")
    .find("ul").addClass("in")
    .find("li[rel='1']").addClass("active");
    var filter = {page:1,status:0};


    laydate.render({
        elem: '#datetime'
    })
    $(function () {
        renderList();


        $('#tblDataList').on('click','.btn-Close',function(){
            var id=$(this).parents('tr').eq(0).attr('data-id');
            var status=$(this).parents('tr').eq(0).attr('data-status');
            var msg=$(this).attr('msg');
            layer.confirm('确定'+msg,{
                btn:['确定','取消']
            },function(){
                var url = '/admin/activity/change';
                $.post(url,{'id':id,'status':status},function(data){
                    layer.msg('操作成功');
                    renderList();
                }).fail(failure);
            },function(){
                layer.closeAll();
            })
        });
        var filter2={page:1};
        $('#tblDataList').on('click','.btn-join',function(){
            filter2.id=$(this).parents('tr').eq(0).attr('data-id');
            $.get('/admin/activity/'+filter2.id+'/join?page='+filter2.page,function(data){
                $("#modalDialog").html(template("tplDataJoinListTr", data)).modal("show");
                $("#modalDialog .pagination2").html(page(data.last_page, data.total, data.current_page));
            }).fail(failure);
        });

        $('#modalDialog').on('click','.pagination2 a',function(){
            filter2.page = $(this).attr("rel");;
            $.get('/admin/activity/'+filter2.id+'/join?page='+filter2.page,function(data){
                $("#modalDialog").html(template("tplDataJoinListTr", data)).modal("show");
                $("#modalDialog .pagination2").html(page(data.last_page, data.total, data.current_page));
            }).fail(failure);
        });

        //发布
        $('#tblDataList').on('click','.btn-is_publish',function() {
            var id=$(this).parents('tr').eq(0).attr('data-id');
            $.post('/admin/activity/'+id+'/publish',{"is_publish":1},function(data){
                renderList();
            }).fail(failure);
        });


        $('#tblDataList').on('click','.btn-pro',function() {
            var id = $(this).parents('tr').eq(0).attr('data-id');
            $.post('/admin/activity/'+id+'/pro',function(data){
                renderList();
            }).fail(failure);
        });
        //修改状态
        $('#tblDataList').on('click','.btn-status',function() {
            var id = $(this).parents('tr').eq(0).attr('data-id');
            var status = $(this).attr('rel');
            $.post('/admin/activity/'+id+'/status-change',{'status':status},function(data){
                renderList();
            }).fail(failure);
        });


        //删除
        $('#tblDataList').on('click','.btn-del',function() {
            var id = $(this).parents('tr').eq(0).attr('data-id');
            layer.confirm('请确定是否删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.post('/admin/activity/'+id+'/del',function(data){
                    renderList();
                    layer.closeAll();
                }).fail(failure);
            }, function(){
                layer.closeAll();
            });

        });




        $('.btn-tab').on('click',function(){
            $(this).parents('li').eq(0).addClass('active').siblings().removeClass('active');
            filter.status = $(this).attr('rel');//status==3 为banner
            filter.page = 1;
            renderList();
        });


        $('#tblDataList').on('click','#buttonData',function(){
            filter.title = $("input[name='title']").val();
            filter.class = $("select[name='class']").val();
            filter.datetime = $("input[name='datetime']").val();
            filter.page = 1;
            renderList();
        });

        $("#pagination").on("click", ".pagination a", function() {
            filter.page = $(this).attr("rel");
            renderList();
        });
    })

    var renderList = function(){
        $("#tblDataList tbody").html('<tr><td colspan="9">'+load+'</td></tr>');
        var url = '/admin/activity/page-rows';
        $.get(url,filter,function(data){
            var pagination = data.rows;
            $("#tblDataList tbody").html(template("tplDataListTr", data));
            $("#pagination").html(page(pagination.last_page, pagination.total, pagination.current_page));
        }).fail(failure);
    };

</script>
@endsection
